$_img_path: $img_path + 'p3/';
.p3 {
  background: url($_img_path + 'bg3.jpg');
  background-size: cover;
  text-align:center;
  @at-root {
    $reason_atime:.5s;
    $before_atime:1s;
    $after_atime:1s;
    $arrow_atime:.5s;
    $text_atime:.5s;
    $title_atime:.2s;
    $interval:.2s;
    $text_dtime:$reason_atime+$slide_atime+$interval;
    $title_dtime:$text-atime+$text_dtime+$interval;
    $before_dtime:$title_dtime+$text_atime+$interval;
    $arrow_dtime:$before_dtime+$before_atime+$interval;
    $after_dtime:$arrow_atime+$arrow_dtime+$interval;

    .reason_p3_img {
      $origin_width: 540px;
      $origin_height: 90px;
      background: url($_img_path + 'p3-title.png') no-repeat;
      background-size: $origin_width/2;
      width: $origin_width/2;
      height: $origin_height/2;
      margin: 0 auto;
      position: relative;
      top: 10%;
      @include vp(transform,scale(.1));
      opacity:0;
      @at-root  .p3.showing #{&} {
        @include vp(transition, all $reason_atime $slide_atime ease-in-out);
        @include vp(transform,scale(1));
        opacity:1
      }
    }

    .text_p3_img {
      $origin_width: 640px;
      $origin_height: 286px;
      background: url($_img_path + 'p3-text.png') no-repeat;
      background-size: $origin_width/2;
      width: $origin_width/2;
      height: $origin_height/2;
      margin:20% auto 0 auto;
      opacity:0;
      @at-root  .p3.showing #{&} {
        @include vp(transition, all $text_atime $reason_atime+$slide_atime ease-in-out);
        opacity:1
      }
    }

    .trend_p3_container {
      padding: 20px;
      background-color:rgba(0,0,0,.4);
      margin-top:30px;
      %same_prop{
        display:inline-block;
        vertical-align:middle;
      }
      @at-root {
        .title_trend_text{
          position: relative;
          top: -10px;
          color: rgba(255, 255, 255, 0.51);
          font-size: 12px;
          font-family: SimSun;
          opacity:0;
          @at-root  .p3.showing #{&} {
            @include vp(transition, all $title_atime $title_dtime ease-in-out);
            @include vp(transform,scale(1));
            opacity: 1;
          }
        }
        .after_trend_img {
          $origin_width: 180px;
          $origin_height: 217px;
          background: url($_img_path + '2014.png') no-repeat;
          background-size: $origin_width/2;
          width: $origin_width/2;
          height: $origin_height/2;
          @extend  %same_prop;
          @include vp(transform,scale(.1));
          opacity:0;
          @at-root  .p3.showing #{&} {
            @include vp(transition, all $after_atime $after_dtime ease-in-out);
            @include vp(transform,scale(1));
            opacity:1
          }
        }

        .arrow_trend_img {
          $origin_width: 38px;
          $origin_height: 56px;
          background: url($_img_path + 'share.png') no-repeat;
          background-size: $origin_width/2;
          width: $origin_width/2;
          height: $origin_height/2;
          margin:0 10px;
           opacity:0;
          @extend  %same_prop;
          @at-root  .p3.showing #{&} {
            @include vp(transition, all $arrow_atime $arrow_dtime ease-in-out);
            opacity:1
          }
        }
        .pre_trend_img {
          $origin_width: 180px;
          $origin_height: 215px;
          background: url($_img_path + '2013.png') no-repeat;
          background-size: $origin_width/2;
          width: $origin_width/2;
          height: $origin_height/2;
          @include vp(transform,scale(.1));
          opacity:0;
          @extend  %same_prop;
          @at-root  .p3.showing #{&} {
            @include vp(transition, all $before_atime $before_dtime ease-in-out);
            @include vp(transform,scale(1));
            opacity:1
          }
        }

      }

    }
  }
}
@at-root {
  .dial-wedge {
    @include vp(transition,all .5s linear);
    @include vp(transform,rotateZ(-45deg));
    border-radius: 0 4em 4em 0;
    background: red;
    width: 2em;
    height: 4em;
    transform-origin: 0% 50%;
    @at-root  .p3.showing #{&} {
      @include vp(transition, all 2s 1s ease-in-out);
      @include vp(transform,rotateZ(-95deg));
    }
  }
  .dial-mom{
    position:relative;
    left:50%;
    width:4em;
    background-color:yellow;
    height: 4em;
    border-radius:2em;
  }
  .dial-container {
    position: absolute;
    top: 0;
    left: 2em;
    width: 2em;
    height: 4em;
    overflow: hidden;
  }
}